.container {
  width: var(--width-primary);
  margin: auto;
}

.title_bar {
  height: 8rem;
  line-height: 8rem;
  font-size: 2rem;
  text-indent: 4rem;
  color: #424242;
  background-color: #fff;
}

.videos {
  padding: 1.4rem 0;
}

.video_item {
  background-color: #fff;
  transition: 0.2s linear;
  cursor: pointer;

  &:hover {
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.1);
    transform: translate3d(0, -2px, 0);
  }

  &.large {
    .cover {
      height: 36rem;

      .btn_play {
        width: 7rem;
        height: 4.8rem;
        left: 4rem;
        bottom: 2rem;
        border-radius: 2.4rem;

        .icon {
          font-size: 2.2rem;
        }
      }
    }

    .footer {
      height: 13rem;
      padding-top: 3rem;

      .title {
        font-size: 2.4rem;
        margin-bottom: 1rem;
      }

      .description {
        color: #757575;
        font-size: 1.4rem;
      }
    }
  }

  .cover {
    height: 18rem;

    &:hover {
      .btn_play {
        border-color: var(--color-primary);
        background-color: var(--color-primary);
      }
    }

    .picture {
      width: 100%;
      height: 100%;
    }

    .btn_play {
      position: absolute;
      left: 2rem;
      bottom: 1rem;
      width: 3.6rem;
      height: 2.4rem;
      border: 0.2rem solid #fff;
      border-radius: 1.2rem;
      background-color: rgba(0, 0, 0, 0.6);
      transition: 0.2s linear;
      display: flex;
      align-items: center;
      justify-content: center;

      .icon {
        font-size: 1.2rem;
        color: #fff;
      }
    }
  }

  .footer {
    height: 8.5rem;
    padding-top: 2.8rem;
    text-align: center;

    .title {
      font-size: 1.4rem;
      color: #333;
      margin-bottom: 0.6rem;
    }

    .description {
      font-size: 1.2rem;
      color: #b0b0b0;
    }
  }
}
